<!--综合决策分析-->
<template>
  <div class="decision" :class="fullScreen?'decision-wrapper':''" >
    <div class="nav-top"  :class="leftAnimate"  :style="{width:navWidth+ 'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">参保人员画像（{{insuranceName1}}）</h2>
        <div class="top-operate">
          <span class="three-spot">...</span>
          <i></i>
          <svg class="all-close-btn icon-svg" v-if="!fullScreen" @click="closeAll"  viewBox="0 0 612 792">
            <path :d="svgPath.closeFullScreen"/>
          </svg>
        </div>
      </div>
    </div>
    <div id="colligateAnalysisChartContainer" @mouseenter="mouseenter($event)" @mouseleave="mouseleave()" :style="{height:height-15+'px'}">
      <!-- 头部筛选和标题 -->
      <top-filter :noMarginBottom="1" :title="reportName" ref="topFilter" :isShowHelp="this.isShowHelp" :helpContent="this.helpMessage">
        <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区"
                             :filter="filter" type="planArea" :pageChange = 'pageChange'></double-check-filter>
        <single-list-filter-without-cb v-show="this.$route.params.id==1000" :filter="filter" :type="'socialInsurance'"
                                       :leftTipText="'险种'"
                                       @confirmSingleSelect="confirmSingleSelectSocialInsurance"
                                       :pageChange = 'pageChange'
        >
        </single-list-filter-without-cb>
      </top-filter>
      <div class="colligateChartContainer" :style="{height:height-115+'px'}">
        <div class="three-chart-part">
          <div class="three-chart-part-top">
           <div class="three-chart-part-box">
             <div class="three-chart-part-title">
               <img src="../../assets/img/chart-svg/age-scatter.svg" alt="">
               年龄段分布
             </div>
             <div id="age-scatter" :style="{height:(height-115)*0.6-44+'px'}" class="three-chart-part-wrapper"></div>
           </div>
          </div>
          <div class="three-chart-part-bottom">
            <div class="three-chart-part-box">
              <div class="three-chart-part-title">
                <img src="../../assets/img/chart-svg/job-scatter.svg" alt="">
                就业情况TOP3
              </div>
              <div id="job-scatter" :style="{height:(height-115)*0.4-34+'px'}" class="three-chart-part-wrapper"></div>
            </div>
          </div>
        </div>
        <div class="three-chart-part">
          <div class="three-chart-part-box">
            <div class="three-chart-part-title">
              <img src="../../assets/img/chart-svg/sex-scatter.svg" alt="">
              性别分布
            </div>
            <div id="pie" :style="{height:(height-115)-55+'px'}" class="three-chart-part-wrapper"></div>
            <div class="chart-legend" style="display:none;">
              <div class="legend1">
                <span></span>
                表示统计值大于参保人数目标
              </div>
              <div class="legend2">
                <span></span>
                表示统计值小于参保人数目标
              </div>
            </div>
          </div>
        </div>
        <div class="three-chart-part">
          <div class="three-chart-part-top">
            <div class="three-chart-part-box">
              <div class="three-chart-part-title">
                <img src="../../assets/img/chart-svg/unit-scatter.svg" alt="">
                单位类型分布
              </div>
              <div id="unit-scatter" :style="{height:(height-115)*0.6-44+'px'}" class="three-chart-part-wrapper"></div>
            </div>
          </div>
          <div class="three-chart-part-bottom">
            <div class="three-chart-part-box">
              <div class="three-chart-part-title">
                <img src="../../assets/img/chart-svg/profession-scatter.svg" alt="">
                职业分布TOP3
              </div>
              <div id="profession-scatter-echart" :style="{height:(height-115)*0.4-34+'px'}" class="three-chart-part-wrapper"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="colligateChart-go-next" @click="goToNext">
        查看参保人员分布详情  >>
      </div>
    </div>
  </div>
</template>
<script>
  import job from '../../assets/img/chart-svg/job.svg'
  import career from '../../assets/img/chart-svg/career.svg'
  import company from '../../assets/img/chart-svg/company.svg'
  import other from '../../assets/img/chart-svg/other.svg'
  import insuredPersonnel from '../../assets/img/chart-svg/insured-personnel.svg'
  import '../../assets/css/last-charts.css'
  import '../last/filter/topFilter.css'
  import {svgPath,quitFullScreen} from "../../assets/js/utils";
  import {loadingOpt} from '../../assets/js/utils.js'
  import DoubleCheckFilter from '../last/filter/double-check-filter.vue'
  import TopFilter from '../last/filter/top-filter1.vue'
  import {baseApiF,getSearchItems} from "../../api/api";
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox'
  export default {
    props: ['isChange','fullScreen','isCollapse','pageChange'],
    data() {
      return{
        isGoOther:false,
        insuranceName1:'职工五险',
        job,
        career,
        company,
        other,
        insuredPersonnel,
        leftAnimate:'',
        svgPath:svgPath,
        navWidth:800,
        top:70,
        height: 500,
        areaCode: '',
        areaName: '',
        isShowHelp: false,
        insuranceType:1001,
        insuranceName:'养老',
        helpMessage:'',
        reportName:'参保人员画像',
        filter:null,
        // pieTitlePosition:'2%'
        pieTitlePosition:baseApiF()?'10%':'2%',
        showInsuranceType:false
      }
    },
    components:{
      DoubleCheckFilter,
      TopFilter,
      SingleListFilterWithoutCb
    },
    watch:{
      fullScreen(val){},
      isChange(){
        setTimeout(()=>{
          this.getChartItem();
        },100)
      },
      pageChange(){
        let that = this;
        let id = 1000;
        id = that.$route.params.id;
        that.getFirstData(id);
      },
    },
    activated(){
      // this.getChartItem();
      // let that = this;
      //获取筛选数据
      // that.getData();
    },
    mounted() {
      this.getChartItem();
      //获取筛选数据
      // that.getFirstData();
      let that = this;
      let id = that.$route.params.id;
      that.getFirstData(id);
    },
    methods: {
      getFirstData(id){
        getSearchItems('init/initInput').then((res) => {
          if (res.code == 0) {
            this.filter = res.data;
            let areaCode = [];
            let areaName = [];
            this.filter.nc.planArea.map((item, index) => {
              if (index > 0 && index <= 6) {
                areaCode.push(item.selectId)
                areaName.push(item.selectName);
              }
            });
            this.areaCode = areaCode.join(',');
            this.areaName = areaName.join('、');
            if(id==1000){
              this.showInsuranceType = true;
              this.insuranceType = this.filter.nc.insuranceTypes[0].selectId;
              this.insuranceName = this.filter.nc.insuranceTypes[0].selectName;
              this.insuranceName1 = '职工五险';
            }else{
              this.showInsuranceType = false;
              this.insuranceType = id;
              this.filter.nc.insuranceTypes.map((item,index)=>{
                if(item.selectId == id){
                  this.insuranceName = item.selectName;
                  this.insuranceName1 = item.selectName;
                }
              })
            }
          }
        }).then(res=>{
          // ['profession-scatter-echart','unit-scatter','pie','job-scatter','age-scatter']
          this.myChartPie = this.$echarts.init(document.getElementById('pie'))
          this.myChartProfession = this.$echarts.init(document.getElementById('profession-scatter-echart'))
          this.myChartUnit = this.$echarts.init(document.getElementById('unit-scatter'))
          this.myChartJob = this.$echarts.init(document.getElementById('job-scatter'))
          this.myChartAge = this.$echarts.init(document.getElementById('age-scatter'))
          this.showLoading();
          this.getData()
        });
      },
      //进入详情
      goToNext(){
        let hash = window.location.hash;
        let data = {};
        data.areaCode = this.areaCode;
        data.insuredCode = this.insuranceType;
        data.areaName = this.areaName;
        data.insuredName = this.insuranceName;
        data.hash = hash;
        this.$router.push({path:`/colligate-analysis/comprehensive-decision-analysis-detail`,query:data});
      },
      getData(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.clearChart();
          this.showLoading();
          this.$axios.post(`${baseApiF()}report/InsuredPersonPicture`,{areaCode:this.areaCode,baoXianType:this.insuranceType}).then(res=>{
            let mes = res.data;
            if(mes.code==0){
              this.hideLoading();
              this.drawPie(mes.data.xingBieMap)
              this.drawAge(mes.data.nianLingDuanMap)
              this.drawUnit(mes.data.danWeiLeiXingMap)
              this.drawJob(mes.data.jiuYeQingKuangMap)
              this.drawProfession(mes.data.zhiYeFenBuMap)
            }
          })
        },300)
      },
      closeAll(){
        quitFullScreen();
      },
      mouseenter (e) {
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
        this.$refs.topFilter._showChartTitle()
      },
      planAreaSelect (selectedIdArr, selectedNameArr) {
        // 统筹区选择
        this.areaCode = selectedIdArr.join(',');
        this.areaName = selectedNameArr.join('、');
        this.getData();
      },
      //选择险种
      confirmSingleSelectSocialInsurance(filter,selectedName) {
        this.insuranceType = filter;
        this.insuranceName = selectedName;
        this.getData()
      },
      //动态设置宽高
      getChartItem(){
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          if(document.querySelector('.el-aside')){
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          barHeight = 0;
          sideWidth = 0;
          top=0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight -54 ;
        if(this.myChartPie){
          setTimeout(()=>{
            this.resize();
          },100)
        }
        //每一个图表块的宽度
        let width = 1000;
        if(document.querySelector('.chart-box')){
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
      },
      drawPie(json){
        // console.log(json)
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let legendArr = [];
        let orangeNum = [];
        let yellowNum = [];
        let blackNum = [];
        let surplusNum = [];
        let pieData=[];
        let colorList = ['#3281fd', '#ff6a93', '#8a8a8a', '#ccc'];
        json.xingBieFenBu.map((item,i)=>{
          pieData.push({value:json.canBaoRenShu[i],name:item+json.zhanBi[i]+'%',itemStyle:{color:colorList[i]}})
          legendArr.push(`${item}${realNum[i]}%`)
          if(targetNum[i]==0){
            orangeNum.push(realNum[i])
            yellowNum.push(0)
            blackNum.push(0)
            surplusNum.push(Number((100-realNum[i]).toFixed(2)))
          }else if(targetNum[i]<realNum[i]){
            orangeNum.push(targetNum[i])
            yellowNum.push(Number((realNum[i]-targetNum[i]).toFixed(2)))
            blackNum.push(0)
            surplusNum.push(Number((100-realNum[i]).toFixed(2)))
          }else if(targetNum[i]>realNum[i]){
            orangeNum.push(targetNum[i])
            yellowNum.push(0)
            blackNum.push(Number((targetNum[i]-realNum[i]).toFixed(2)))
            surplusNum.push(Number((100-targetNum[i]).toFixed(2)))
          }else{
            orangeNum.push(realNum[i])
            yellowNum.push(0)
            blackNum.push(0)
            surplusNum.push(Number((100-realNum[i]).toFixed(2)))
          }
        })
        let that = this;
        let placeHolderStyle = {
          normal : {
            color: 'rgba(0,0,0,0)',
            label: {show:false},
            labelLine: {show:false}
          },
          emphasis : {
            color: 'rgba(0,0,0,0)'
          }
        };
        this.myChartPie.setOption({
          tooltip:{
            show:true,
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              if(params.name=='invisible'){
                return ''
              }else{
                let i = params.dataIndex;
                let title = '';
                if(i==0){
                  title = '男性'
                }else if(i==1){
                  title = '女性'
                }else{
                  title = '未知'
                }
                let txt = `
                          <p>性别分布</p>
                          <p>性别：${title}</p>
                          <p>参保人数：${json.canBaoRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
                // <p>目标参保人数：${json.muBiao[i]}</p>
                // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
                return txt;
              }
            }
          },
          title: {
            text: `{c|}\n{a|参保人员}\n{b|${json.canBaoRenYuanZongShu}}`,
            x: 'center',
            y: 'center',
            textStyle : {
              fontSize : 20,
              color:'#67ffdb',
              fontWeight : 'bolder',
              rich:{
                a:{
                  lineHeight:32,
                  fontSize:18,
                  fontWeight:'bold'
                },
                b:{
                  fontSize:16,
                  fontWeight:'bold'
                  // padding:[0,0,0,40]
                },
                c:{
                  backgroundColor:{
                    image:that.insuredPersonnel
                  },
                  width:35,
                  height:40
                },
              }
            }
          },
          legend: {
            orient: 'vertical',
            align:"left",
            left:"center",
            bottom: 0,
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            selectedMode: false,
            textStyle: {
              color: '#fff',
            },
          },
          series: [
            {
              minAngle:5,
              center:['50%','50%'],
              name:json.reportName,
              type:'pie',
              radius: ['40%', '60%'],
              hoverAnimation:false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:pieData
            }
          ]
        })
        /*this.myChartPie.setOption({
          grid:{
            width:'80%',
            height:'80%'
          },
          tooltip:{
            show:true,
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              if(params.name=='invisible'){
                return ''
              }else{
                let i = params.seriesIndex;
                let title = '';
                if(i==0){
                  title = '男性'
                }else if(i==1){
                  title = '女性'
                }else{
                  title = '未知'
                }
                let txt = `
                          <p>性别分布</p>
                          <p>性别：${title}</p>
                          <p>参保人数：${json.canBaoRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
                // <p>目标参保人数：${json.muBiao[i]}</p>
                // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
                return txt;
              }
            }
          },
          title: {
            text: `{c|}\n{a|参保人员}\n{b|${json.canBaoRenYuanZongShu}}`,
            x: 'center',
            y: 'center',
            textStyle : {
              fontSize : 20,
              color:'#67ffdb',
              fontWeight : 'bolder',
              rich:{
                a:{
                  lineHeight:32,
                  fontSize:18,
                  fontWeight:'bold'
                },
                b:{
                  fontSize:16,
                  fontWeight:'bold'
                  // padding:[0,0,0,40]
                },
                c:{
                  backgroundColor:{
                    image:that.insuredPersonnel
                  },
                  width:35,
                  height:40
                },
              }
            }
          },
          legend: {
            orient : 'vertical',
            x : '52%',
            // y : that.pieTitlePosition,
            top:'10%',
            textStyle:{
              color:'#fff'
            },
            selectedMode:false,
            icon: 'rect',
            itemWidth:10,
            itemHeight:10,
            data:legendArr,
          },
          series : [
            {
              type:'pie',
              clockWise:false,
              hoverAnimation:false,
              radius : ['65%', '80%'],
              label: {show:false},
              labelLine: {show:false},
              name:legendArr[0],
              itemStyle:{
                color:'#3281fd'
              },
              data:[
                {
                  value:orangeNum[0],
                  itemStyle:{
                    color:'#3281fd'
                  },
                },
                {
                  value:yellowNum[0],
                  itemStyle:{
                    color:yellowNum[0]==0?'rgba(0,0,0,0)':'#ffd66a'
                  },
                },
                {
                  value:blackNum[0],
                  itemStyle:{
                    color:blackNum[0]==0?'rgba(0,0,0,0)':'#3a598c'
                  },
                },
                {
                  value:surplusNum[0],
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            },
            {
              type:'pie',
              clockWise:false,
              hoverAnimation:false,
              radius : ['50%', '65%'],
              name:legendArr[1],
              minAngle:5,
              label: {show:false},
              labelLine: {show:false},
              itemStyle:{
                color:'#ff6a93'
              },
              data:[
                {
                  value:orangeNum[1],
                  minAngle:10,
                  itemStyle:{
                    color:'#ff6a93'
                  },
                },
                {
                  value:yellowNum[1],
                  itemStyle:{
                    color:yellowNum[1]==0?'rgba(0,0,0,0)':'#ffd66a'
                  },
                },
                {
                  value:blackNum[1],
                  itemStyle:{
                    color:blackNum[1]==0?'rgba(0,0,0,0)':'#3a598c'
                  },
                },
                {
                  value:surplusNum[1],
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            },
            {
              type:'pie',
              name:legendArr[2],
              clockWise:false,
              hoverAnimation:false,
              radius : ['35%', '50%'],
              label: {show:false},
              labelLine: {show:false},
              itemStyle:{
                color:'#a8a8a8',
              },
              minAngle:5,
              data:[
                {
                  value:orangeNum[2],
                  itemStyle:{
                    color:json.canBaoRenShu[2]==0?'rgba(0,0,0,0)':'#a8a8a8',
                  },
                },
                {
                  value:yellowNum[2],
                  itemStyle:{
                    color:yellowNum[2]==0?'rgba(0,0,0,0)':'#ffd66a',
                  },
                },
                {
                  value:blackNum[2],
                  itemStyle:{
                    color:blackNum[2]==0?'rgba(0,0,0,0)':'#3a598c'
                  },
                },
                {
                  value:surplusNum[2],
                  name:'invisible',
                  itemStyle : placeHolderStyle
                }
              ]
            }
          ]
        })*/
      },
      drawAge(json){
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let obj = this.handleData(realNum,targetNum);
        let xAxisData = [];
        json.nianLingDuanU.map((item,i)=>{
          xAxisData.push(i)
        })
        this.myChartAge.setOption({
          grid: {
            top:20,
            left:10
          },
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let i = params[0].dataIndex;
              // <p>目标参保人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>年龄段分布</p>
                          <p>年龄段：${json.nianLingDuanU[i]}${json.nianLingDuanD[i]}</p>
                          <p>参保人数：${json.canBaoRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
              return txt;
            }
          },
          yAxis:{
            show:false,
          },
          xAxis:{
            data:xAxisData,
            axisLine: {
              show: false, // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              interval:0,
              textStyle: {
                color: '#fff',
                lineHeight:18,
              },
              formatter:function(val){
                let txt = json.nianLingDuanU[val];
                return `{a|${txt}}\n${json.nianLingDuanD[val]}`
              },
              rich:{
                a:{
                  lineHeight:16
                }
              }
            }
          },
          series:[{
            type:'bar',
            data:obj.orangeNum,
            stack:'age',
            color:'#ff6a93',
            barWidth:'40%',
            barMaxWidth:30,
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let i = params.dataIndex;
                if(obj.blackNum[i]+obj.yellowNum[i]==0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return '';
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.yellowNum,
            stack:'age',
            color:'#ffd66a',
            barWidth:'40%',
            barMaxWidth:20,
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.blackNum,
            stack:'age',
            color:'#3a598c',
            barWidth:'40%',
            barMaxWidth:30,
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          }]
        })
      },
      drawUnit(json) {
        // console.log(json)
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let obj = this.handleData(realNum,targetNum);
        let that = this;
        this.myChartUnit.setOption({
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let i = params[0].dataIndex;
              let name = params[0].name;
              // <p>目标参保人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>单位类型分布</p>
                          <p>单位类型：${name}</p>
                          <p>参保人数：${json.canBaoRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
              return txt;
            }
          },
          grid: {
            left:115,
            right:45,
            bottom:20,
            top:10
          },
          xAxis:{
           show:false,
          },
          yAxis:{
            data: json.danWeiLeiXing,
            inverse: true,
            axisLine:{ //y轴的横线是否显示
              show:false,
            },
            axisTick:{ //y轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              formatter:  function (value) {
                let i = value
                if(i=='企业'){
                  return `{a|${value}}{company|}`
                }else if(i=='事业单位'){
                  return `{a|${value}}{career|}`
                }else if(i=='灵活就业'){
                  return `{a|${value}}{job|}`
                }else if(i=='其它'){
                  return `{a|${value}}{other|}`
                }
              },
              textStyle: {
                color: '#fff'
              },
              rich:{
                a:{
                  padding:[0,10,0,0]
                },
                other: {
                  backgroundColor: {
                    image:that.other
                  },
                  height: 20
                },
                job: {
                  backgroundColor: {
                    image:that.job
                  },
                  height: 20
                },
                career: {
                  backgroundColor: {
                    image:that.career
                  },
                  height: 20
                },
                company: {
                  backgroundColor: {
                    image:that.company
                  },
                  height: 20
                },
              }
            }
          },
          series:[{
            type: 'bar',
            showSymbol: false,
            stack:'unit',
            itemStyle:{
              color:'#55cdb7',
              borderWidth:0
            },
            data: obj.orangeNum,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(obj.blackNum[i]+obj.yellowNum[i]==0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return '';
                }
              },
              color:'#fff'
            },
            barWidth:20,
            // barMaxWidth:20,
          },{
            type:'bar',
            data:obj.yellowNum,
            stack:'unit',
            color:'#ffd66a',
            barWidth:'40%',
            barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.blackNum,
            stack:'unit',
            color:'#3a598c',
            barWidth:'40%',
            barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          }]
        })
      },
      drawJob(json){
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let obj = this.handleData(realNum,targetNum);
        this.myChartJob.setOption({
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let i = params[0].dataIndex;
              let name = params[0].name;
              // <p>目标参保人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>就业情况分布</p>
                          <p>就业情况类型：${name}</p>
                          <p>参保人数：${json.canBaoRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
              return txt;
            }
          },
          grid:{
            top:5,
            right:50,
            bottom:10,
            left:55,
          },
          xAxis:{
           show:false
          },
          yAxis:{
            data:json.jiuYeQingKuang,
            inverse:true,
            axisLine: {
              show: false, // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              textStyle: {
                color: '#fff'
              }
            }
          },
          series:[{
            type:'bar',
            data:obj.orangeNum,
            stack:'job',
            color:'#3281fd',
            barWidth:20,
            // barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(obj.blackNum[i]+obj.yellowNum[i]==0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return '';
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.yellowNum,
            stack:'job',
            color:'#ffd66a',
            barWidth:'40%',
            barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.blackNum,
            stack:'job',
            color:'#3a598c',
            barWidth:'50%',
           barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          }]
        })
      },
      drawProfession(json){
        let realNum = json.zhanBi;
        let targetNum = json.muBiaoZhanBi;
        let obj = this.handleData(realNum,targetNum);
        this.myChartProfession.setOption({
          tooltip:{
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle :{
              fontSize:12
            },
            formatter:function(params){
              let i = params[0].dataIndex;
              let name = params[0].name;
              // <p>目标参保人数：${json.muBiao[i]}</p>
              // <p>目标占总人数比例：${json.muBiaoZhanBi[i]}%</p>
              let txt = `
                          <p>职业分布</p>
                          <p>职业类型：${name}</p>
                          <p>参保人数：${json.canBaoRenShuXianShi[i]}</p>
                          <p>占总人数比例：${json.zhanBi[i]}%</p>
              `
              return txt;
            }
          },
          grid:{
            top:5,
            right:50,
            bottom:10,
            left:58,
          },
          xAxis:{
            show:false
          },
          yAxis:{
            data:json.zhiYeFenBu,
            inverse:true,
            axisLine: {
              show: false, // 显示x轴坐标线并设置为虚线
            },
            axisTick: {
              show: false // 不显示x轴坐标的刻度
            },
            axisLabel: {
              show: true ,// 显示x轴坐标数值
              textStyle: {
                color: '#fff'
              }
            }
          },
          series:[{
            type:'bar',
            data:obj.orangeNum,
            stack:'profession',
            color:'#ff6a93',
            barWidth:20,
            // barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(obj.blackNum[i]+obj.yellowNum[i]==0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return '';
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.yellowNum,
            stack:'profession',
            color:'#ffd66a',
            barWidth:'50%',
           barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          },{
            type:'bar',
            data:obj.blackNum,
            stack:'profession',
            color:'#3a598c',
            barWidth:'50%',
           barMaxWidth:20,
            label:{
              show:true,
              position:'right',
              formatter:function(params){
                let i = params.dataIndex;
                if(params.value!=0){
                  return `${json.zhanBi[i]}%`
                }else{
                  return ''
                }
              },
              color:'#fff'
            }
          }]
        })
      },
      showLoading(){
        this.myChartPie.showLoading(loadingOpt)
        this.myChartProfession.showLoading(loadingOpt)
        this.myChartUnit.showLoading(loadingOpt)
        this.myChartJob.showLoading(loadingOpt)
        this.myChartAge.showLoading(loadingOpt)
      },
      hideLoading(){
        this.myChartPie.hideLoading()
        this.myChartProfession.hideLoading()
        this.myChartUnit.hideLoading()
        this.myChartJob.hideLoading()
        this.myChartAge.hideLoading()
      },
      resize(){
        this.myChartPie.resize()
        this.myChartProfession.resize()
        this.myChartUnit.resize()
        this.myChartJob.resize()
        this.myChartAge.resize()
      },
      clearChart(){
        this.myChartPie.clear()
        this.myChartProfession.clear()
        this.myChartUnit.clear()
        this.myChartJob.clear()
        this.myChartAge.clear()
      },
      handleData(realNum,targetNum){
        let orangeNum = [];
        let yellowNum = [];
        let blackNum = [];
        realNum.map((item,index)=>{
          if(targetNum[index]==0){
            orangeNum.push(item);
            yellowNum.push(0);
            blackNum.push(0);
          }else if(targetNum[index]>item){
            orangeNum.push(item)
            yellowNum.push(0)
            blackNum.push(Number((targetNum[index]-item).toFixed(2)))
          }else if(targetNum(index)<item){
            orangeNum.push(targetNum(index))
            yellowNum.push(Number((item-targetNum[index]).toFixed(2)))
            black.push(0)
          }else{
            orangeNum.push(item);
            yellowNum.push(0);
            blackNum.push(0);
          }
        })
        let obj = {};
        obj.orangeNum = orangeNum;
        obj.yellowNum = yellowNum;
        obj.blackNum = blackNum;
        return obj;
      }
    },
    beforeRouteEnter(to,from,next){
      next()
    },
    beforeRouteUpdate(to,from,next){
      this.isGoOther = true;
      next()
    },
    beforeRouteLeave (to, from, next) {
      if(to.name=='detail'){
        this.isGoOther = false;
      }else{
        this.isGoOther = true;
      }
      next()
    },
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';
  #colligateAnalysisChartContainer{
    margin: 60px 12px 0 12px;
    background:#1b2b44;
  }
  .three-chart-part{
    float:left;
    width:33.33%;
    height:100%;
    box-sizing:border-box;
    /*border:solid 1px red;*/
    /*clear:both;*/
  }
  .three-chart-part-top{
    height:60%;
    width:100%;
    box-sizing:border-box;
   padding:0 10px 10px 10px;
  }
  .three-chart-part-bottom{
    height:40%;
    width:100%;
    box-sizing:border-box;
    padding:0 10px 0 10px;
  }
  .colligateChart-go-next{
    cursor:pointer;
    float:right;
    margin-top:8px;
    margin-right:9px;
    line-height:28px;
    height:28px;
    padding:0 15px;
    border-radius:5px;
    border:solid 1px #67ffdb;
    color:#67ffdb;
  }
  #pie{
    width:100%;
    height:80%;
  }
  .three-chart-part-title{
    height:32px;
    line-height:32px;
    color:#fff;
  }
  .three-chart-part-wrapper{
    /*flex:auto;*/
  }
  .three-chart-part-title img{
    height:20px;
    margin-top:6px;
    width:20px;
    margin-left:20px;
    float:left;
    margin-right:10px;
  }
  .three-chart-part-box{
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:solid 1px #25395a;
  }
  .chart-legend{
    width:100%;
    text-align:center;
    line-height:28px;
    height:56px;
    color:#fff;
  }
  .chart-legend span{
    width:10px;
    height:10px;
    margin-top:9px;
    margin-left:15px;
    display:inline-flex;
  }
  .legend1 span{
    background:#fff100;
  }
  .legend2 span{
    background:#3a598c;
  }
</style>
